<template>
  <div class="box">
    <van-nav-bar class="top" fixed placeholder title="网易严选">
      <template #left>
        <van-icon
          style="margin-left: 50px"
          color="#666"
          name="wap-home-o"
          size="20"
          @click="goto('/home')"
        />
      </template>
      <template #right>
        <van-icon
          style="margin-right: 10px"
          color="#666"
          name="search"
          size="20"
          @click="goto('/search')"
        />
        <van-icon
          style="margin-right: 50px"
          color="#666"
          name="shopping-cart-o"
          size="20"
          @click="goto('/cart')"
        />
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="con">
        <div class="noorders" v-if="flag">
          <img
            src="../assets/home/dan.png"
            alt=""
            style="width: 380px; height: 350px; user-select: none"
          />
        </div>
        <div v-else class="baoguo">
          <div class="bag">
            <span>全部订单</span>
            <span class="fu">已付款</span>
          </div>
          <div class="ding" v-for="item in data" :key="item.order_id">
            <van-card
              v-for="it in item.data"
              :key="it.goods_id"
              @click="gotoDetails(it.goods_id)"
              :num="it.cart_num"
              :price="it.goods_price"
              :thumb="it.goods_small_logo"
            >
              <template #title class="van-multi-ellipsis--l2">
                {{ it.goods_name }}
              </template>
              <template #footer>
                <van-button
                  size="mini"
                  @click.stop="goto('/ordersitem/' + it.order_id)"
                  >更多</van-button
                >
                <van-button size="mini" round>卖了换钱</van-button>
                <van-button size="mini" round>退换/售后</van-button>
                <van-button size="mini" round color="red" plain
                  >再次购买</van-button
                >
              </template>
            </van-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "orders",
  data() {
    return {
      data: [],
      flag: false,
    };
  },
  created() {
    this.getAllorders();
  },
  methods: {
    goto(url, id) {
      this.$router.push({
        path: url,
        params: {
          id,
        },
      });
    },
    async getAllorders() {
      const {
        data: {
          data: { list },
        },
      } = await this.$request.get("/api/orders", {
        params: {},
      });
      this.data = list;
      if (this.data.length === 0) {
        return (this.flag = true);
      } else {
        this.flag = false;
      }
    },
    gotoDetails(id) {
      this.$router.push({
        name: "Goods",
        params: {
          id,
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  .content {
    .con {
      padding: 20px;
      background: #f5f5f5;
      .to {
        padding: 14px;
        background-color: #fffced;
        .xinxi {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .chen {
            display: inline-block;
            margin-right: 20px;
          }
          .van-button {
            background-color: #fffced;
            margin-left: 140px;
          }
        }
        .dizhi {
          color: #7f7f7f;
          text-align: left;
        }
      }
      .baoguo {
        background-color: #fff;
        margin-top: 10px;
        padding: 15px;
        padding-bottom: 50px;
        .bag {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
          .fu {
            color: #dd1a21;
          }
        }
        .van-card__content {
          text-align: left;
        }
      }
      .bian {
        background-color: #fff;
        margin-top: 15px;
        text-align: left;
        padding: 15px;
        .hao {
          font-size: 14px;
          color: #7f7f7f;
          span {
            color: black;
            margin-left: 10px;
          }
        }
        .tiao {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .ti1 {
            img {
              width: 28px;
              height: 17px;
              vertical-align: middle;
              margin-right: 5px;
            }
            span {
              color: #333;
              font-size: 14px;
              line-height: 14px;
              vertical-align: middle;
            }
          }
        }
      }
      .total {
        margin-top: 10px;
        background-color: #fff;
        text-align: left;
        padding: 15px;
        color: #666;
        .you {
          margin-top: 3px;
        }
        .ying {
          font-size: 14px;
          color: #dd1a21;
        }
        .que {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 5px;
          background-color: #fffced;
          height: 35px;
          .haoli {
            display: flex;
            align-items: center;
            .van-icon {
              padding-top: 2px;
            }
          }
        }
      }
    }
  }
}
</style>
